/**
 * @authors tanqichao
 * @date    2017-06-07 13:59:27
 * @module  互动创意包
 */

import { Form, Input, Icon, Row, Col, Button, Tabs, message, Popover } from 'antd';
import React, { Component, PropTypes } from 'react';
import ReactQuill from '../plugin/react-quill';
import ImgUpload from '../plugin/imgUpload';
import Styles from './createTradition.less';
import { connect } from 'dva';

const FormItem = Form.Item;
const createForm = Form.create;
const TabPane = Tabs.TabPane;
const formItemLayout = {
  labelCol: {span: 2},
  wrapperCol: {span: 11}
};
const formItemLayout1 = {
  labelCol: {span: 2},
  wrapperCol: {span: 13}
};
class Interactive extends Component {
  constructor (props) {
    super(props);
    this.state = {
			description: '',
			thumbnailUrl: '',
			bannerUrl: '',
      exampleType: 0
		}
  }
  submit = (type) => {
		this.props.form.validateFields((error, values) => {
			const state = this.state;
			let dispatchType = '',
					params = null;
			if (error) return ;
			if (type === 'submit') {
				if (!state.description) {
					message.error('请填写商品说明', 3);
					return;
				}
				if (!state.thumbnailUrl) {
					message.error('请上传默认缩略图', 3);
					return;
				}
				if (!state.bannerUrl) {
					message.error('请上传详情页Banner', 3);
					return;
				}
			}
			if (type === 'submit') {
				dispatchType = 'createInteractive/submit';
				params = Object.assign(values, {
          type: "1",
					description: state.description,
					thumbnailUrl: state.thumbnailUrl,
					bannerUrl: state.bannerUrl
				});
			}

			if (type === 'modify') {
				dispatchType = 'createInteractive/modify';
				params = Object.assign(values, {
          type: "1",
					id: this.props.id,
					description: state.description || this.props.creatives[0].description,
					thumbnailUrl: state.thumbnailUrl || this.props.creatives[0].thumbnailUrl,
					bannerUrl: state.bannerUrl || this.props.creatives[0].bannerUrl
				});
			}

			this.props.dispatch({ type: 'createInteractive/setLoading', payload: { createLoading: true }});
			this.props.dispatch({
				type: dispatchType,
				payload: JSON.stringify(params)
			})

		})
	}
  // 商品说明
  setDescription = (html) => {
    this.setState({
      description: html
    })
  }
  // 缩略图
  handleThumbnailUrl = (url) => {
    this.setState({
      thumbnailUrl: url
    })
  }
  // Banner
  handleBannerUrl = (url) => {
    this.setState({
      bannerUrl: url
    })
  }
  showExample = (type, img) => {
    this.setState({
      exampleType: type,
      exampleImg: img
    })
  }
  checkPromoteUrl = (rule, value, callback) => {
    const reg = /^(http|https)/
    if (!value) {
      callback('请填写推广链接')
      return
    }

    if (!(reg.test(value))) {
      callback('请填写以http或者https开头的推广链接')
      return
    }

    callback()
  }

  render () {
    const  { getFieldDecorator } = this.props.form;
    const { action, creatives } = this.props;
    let exampleTip,
        exampleTipTwo,
        exampleTipThree,
        exampleTipFour;
    if(this.state.exampleType === 1 && this.state.exampleImg === 'one') {
      exampleTip = (<div className="example-tip-box">
            <img style={{width:200}} src='http://imgcow.oss-cn-hangzhou.aliyuncs.com/Dsp/%E5%90%8D%E7%A7%B0.png'/>
      </div>);
    }else if(this.state.exampleType === 1 && this.state.exampleImg === 'two') {
      exampleTipTwo = (<div className="example-tip-box">
            <img style={{width:200}} src='http://imgcow.oss-cn-hangzhou.aliyuncs.com/Dsp/%E4%B8%80%E5%8F%A5%E6%8F%8F%E8%BF%B0.png'/>
      </div>);
    }else if(this.state.exampleType === 1 && this.state.exampleImg === 'three') {
      exampleTipThree = (<div className="example-tip-box-twp">
            <img style={{width:200}} src='http://imgcow.oss-cn-hangzhou.aliyuncs.com/Dsp/%E5%9B%BE%E6%96%87%E8%AF%A6%E6%83%851.png'/>
      </div>);
    }else if(this.state.exampleType === 1 && this.state.exampleImg === 'four'){
      exampleTipFour = (<div className="example-tip-box example-tip-box-bottom">
            <img style={{width:200}} src='http://imgcow.oss-cn-hangzhou.aliyuncs.com/Dsp/banner.png'/>
      </div>);
    }
    return (
      <Form className={Styles.tradition}>
        <FormItem
          label="创意包名称"
          {...formItemLayout}
        >
          {getFieldDecorator('title', {
            initialValue: action === 'edit' ? this.props.title : '',
            rules: [{
              required: true,
              message: '请填写创意包名称'
            }]
          })(
            <Input placeholder="不超过20个字" maxLength={20} />
          )}
        </FormItem>
        <FormItem
					label="推广链接"
					{...formItemLayout}
				>
	        {getFieldDecorator('promoteUrl', {
	        	initialValue: action === 'edit' ? this.props.promoteUrl : '',
	          rules: [{
             validator: this.checkPromoteUrl,
            }]
	        })(
	          <Input placeholder="请输入欲推广的网址链接" />
	        )}
	      </FormItem>

        <FormItem
					label="按钮文案"
					{...formItemLayout}
				>
	        {getFieldDecorator('buttonText', {
	        	initialValue: action === 'edit' && creatives ? creatives[0].buttonText ? creatives[0].buttonText : '马上使用' : '马上使用',
            rules: [{
              required: true,
              message: '请输入按钮文案'
            }]
	        })(
	          <Input placeholder="请输入按钮文案" />
	        )}
	      </FormItem>

        <FormItem
					label="商品名称"
					{...formItemLayout}
				>
	        {getFieldDecorator('name', {
	        	initialValue: action === 'edit' && creatives ? creatives[0].name : '',
	          rules: [{
	          	required: true,
	          	message: '请输入商品名称'
	          }],
	        })(
	          <Input placeholder="请设置展示给用户的商品名称，不得超过12个字" maxLength={12} />
	        )}
            <Button className="show-example-btn" onMouseOver={this.showExample.bind(this, 1, 'one')} onMouseOut={this.showExample.bind(this, 2)} type="primary">示例</Button>
            {exampleTip}
	      </FormItem>
				<FormItem
	      	required
					label="商品说明"
					{...formItemLayout1}
				>
	        <ReactQuill
	        	initVal={action === 'edit' && creatives ? creatives[0].description : ''}
	        	onComplete={this.setDescription}
	      	/>
          <Button className="show-example-btn exampletipboxtwo" onMouseOver={this.showExample.bind(this, 1, 'three')} onMouseOut={this.showExample.bind(this, 2)} type="primary">示例</Button>
          {exampleTipThree}
	      </FormItem>
	      <FormItem
					label="一句话描述"
					{...formItemLayout}
				>
					{getFieldDecorator('remark', {
						initialValue: action === 'edit' && creatives ? creatives[0].remark : '',
						rules: [{
	          	required: true,
	          	message: '请输入描述'
	          }]
					})(
	        	<Input type="textarea" className={Styles.textarea}  maxLength={60} placeholder="请描述产品或服务卖点，不超过60个字" />
					)}
          <Button className="show-example-btn" onMouseOver={this.showExample.bind(this, 1, 'two')} onMouseOut={this.showExample.bind(this, 2)} type="primary">示例</Button>
          {exampleTipTwo}
	      </FormItem>
	      <FormItem
	      	required
					label="商品图片"
					labelCol={{span: 4}}
					wrapperCol={{ span: 16}}
				>
	        <Tabs defaultActiveKey="1">
				    <TabPane tab="默认缩略图" key="1">
				    	<ImgUpload
				    		maxMass={{kg: 1*1024*1024}}
				    		limit={{width: 225, height: 140}}
				    		onComplete={this.handleThumbnailUrl}
				    		initUrl={action === 'edit' && creatives ? creatives[0].thumbnailUrl : ''}
				    	/>
				    	<p className={Styles.uploadTitle}>225*140px，格式为jpg、png、jpeg，大小不大于1M。</p>
				    </TabPane>
				    <TabPane tab="详情页Banner" key="2">
				    	<ImgUpload
				    		maxMass={{kg: 1*1024*1024}}
				    		limit={{width: 640, height: 300}}
				    		onComplete={this.handleBannerUrl}
				    		initUrl={action === 'edit' && creatives ? creatives[0].bannerUrl : ''}
				    	/>
				    	<p className={Styles.uploadTitle}>640*300px，格式为jpg、png、jpeg，大小不大于1M。</p>
				    </TabPane>
				  </Tabs>
          <Button className="show-example-btn show-example-btn-bottom" onMouseOver={this.showExample.bind(this, 1, 'four')} onMouseOut={this.showExample.bind(this, 2)} type="primary">示例</Button>
          {exampleTipFour}
	      </FormItem>
        <Row>
	  			<Col span={24}>
          {
            this.props.action === 'edit' ? <Button type="primary" onClick={this.submit.bind(this, 'modify')} loading={this.props.createLoading} className={Styles.submitBtn}>确认修改</Button> :
              <Button type="primary" onClick={this.submit.bind(this, 'submit')} loading={this.props.createLoading} className={Styles.submitBtn}>提交审核</Button>
          }
	  			</Col>
	  		</Row>
      </Form>
    )
  }
};

// export default Form.create()(Interactive);
export default connect((state) => {
  return {
    ...state.createInteractive
  }
})(createForm({})(Interactive))
